<template>
  <view class="detail-container">
    <view v-if="post">
      <!-- 文章内容 -->
      <view class="post-content">
        <view class="post-header">
          <image class="avatar" :src="post.user ? (post.user.avatar || 'https://img1.baidu.com/it/u=4113779165,197494311&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800') : 'https://img1.baidu.com/it/u=4113779165,197494311&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'" mode="aspectFill"></image>
          <view class="post-info">
            <text class="username">{{ post.user ? post.user.username : '' }}</text>
            <text class="time">{{ post.created_at }}</text>
          </view>
        </view>
        
        <view class="content-text">{{ post.content }}</view>
        
        <view class="post-images" v-if="post.images && post.images.length">
          <image 
            v-for="(img, index) in post.images" 
            :key="index"
            :src="img"
            mode="widthFix"
            @click="previewImage(post.images, index)"
          ></image>
        </view>
      </view>

      <!-- 点赞区域 -->
      <view class="like-section">
        <view class="like-header">
          <text class="section-title">点赞 {{ post.likes_count }}</text>
        </view>
        <scroll-view class="like-avatars" scroll-x>
          <view class="avatar-list">
            <image 
              v-for="(like, index) in post.like_users" 
              :key="index"
              :src="like.avatar || 'https://img1.baidu.com/it/u=4113779165,197494311&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'"
              class="like-avatar"
              mode="aspectFill"
            ></image>
          </view>
        </scroll-view>
      </view>

      <!-- 评论区 -->
      <view class="comment-section">
        <view class="comment-header">
          <text class="section-title">评论 {{ post.comments_count }}</text>
        </view>
        
        <view class="comment-list">
          <view class="comment-item" v-for="(comment, index) in post.comment_list" :key="index">
            <image class="comment-avatar" :src="'https://img1.baidu.com/it/u=4113779165,197494311&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'" mode="aspectFill"></image>
            <view class="comment-content">
              <view class="comment-user-row">
                <view class="comment-user">{{ comment.user.username }}</view>
                <uni-icons
                  v-if="comment.user && comment.user.id === user_id"
                  type="trash"
                  size="22"
                  color="#ff4d4f"
                  class="delete-comment-icon"
                  @click="deleteComment(comment, index)"
                />
              </view>
              <view class="comment-text">{{ comment.content }}</view>
              <view class="comment-time">{{ comment.created_at }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部操作栏 -->
      <view class="bottom-bar">
        <view class="input-box">
          <input 
            type="text" 
            v-model="commentText" 
            placeholder="说点什么..." 
            @confirm="submitComment"
            ref="commentInput"
          />
        </view>
        <button class="send-btn" @click="submitComment" :disabled="!commentText.trim()">发表</button>
        <view class="action-buttons">
          <view class="action-btn" @click="toggleLike">
            <uni-icons 
              :type="post.is_liked ? 'heart-filled' : 'heart'" 
              size="24" 
              :color="post.is_liked ? '#ff4d4f' : '#666'"
            ></uni-icons>
            <text>{{ post.likes_count }}</text>
          </view>
          <view class="action-btn" @click="focusCommentInput">
            <uni-icons type="chat" size="24" color="#666"></uni-icons>
            <text>{{ post.comments_count }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="loading">加载中...</view>
  </view>
</template>

<script>
import { request } from '@/utiles/request'

export default {
  data() {
    return {
      commentText: '',
      post: null,
      loading: false,
      user_id: null // 从本地缓存获取
    }
  },
  onLoad(options) {
    const userInfo = uni.getStorageSync('userInfo');
	console.log(userInfo)
    if (userInfo) {
      this.user_id = userInfo.id;
	  console.log(this.user_id)
    }
    this.loadPostDetail(options.id)
  },
  methods: {
    async loadPostDetail(id) {
      if (this.loading) return
      this.loading = true
      
      try {
        const res = await request({
          url: `/admin/api/community/posts/${id}`,
          method: 'GET'
        })
        
        if (res.data.code === 200) {
          this.post = res.data.data
        } else {
          uni.showToast({
            title: res.data.message || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: images[current]
      })
    },
    async toggleLike() {
      try {
        const res = await request({
          url: `/admin/api/community/posts/${this.post.id}/like`,
          method: 'POST',
          data: {
            user_id: this.user_id
          }
        })
        
        if (res.data.code === 200) {
          const { likes_count, is_liked } = res.data.data
          this.post.likes_count = likes_count
          this.post.is_liked = is_liked
        } else {
          uni.showToast({
            title: res.data.message || '操作失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      }
    },
    async submitComment() {
      if (!this.commentText.trim()) return
      
      try {
        const res = await request({
          url: `/admin/api/community/posts/${this.post.id}/comments`,
          method: 'POST',
          data: {
            user_id: this.user_id,
            content: this.commentText
          }
        })
        
        if (res.data.code === 200) {
          const newComment = res.data.data
          this.post.comment_list.unshift(newComment)
          this.post.comments_count++
          this.commentText = ''
          uni.showToast({
            title: '评论成功',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: res.data.message || '评论失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      }
    },
    focusCommentInput() {
      this.$nextTick(() => {
        const input = this.$refs.commentInput;
        if (input && input.focus) input.focus();
      });
    },
    async deleteComment(comment, index) {
      const res = await request({
        url: `/admin/api/community/posts/${this.post.id}/comments/${comment.id}`,
        method: 'DELETE',
        data: { user_id: this.user_id }
      });
      if (res.data.code === 200) {
        this.post.comment_list.splice(index, 1);
        this.post.comments_count--;
        uni.showToast({ title: '删除成功', icon: 'success' });
      } else {
        uni.showToast({ title: res.data.message || '删除失败', icon: 'none' });
      }
    }
  }
}
</script>

<style>
.detail-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 120rpx;
}

.post-content {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.post-info {
  flex: 1;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.time {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.content-text {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.post-images {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.post-images image {
  width: 100%;
  border-radius: 12rpx;
}

.like-section {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.like-avatars {
  width: 100%;
}

.avatar-list {
  display: flex;
  padding: 10rpx 0;
}

.like-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  border: 2rpx solid #ffffff;
}

.comment-section {
  background-color: #ffffff;
  padding: 30rpx;
}

.comment-list {
  margin-top: 20rpx;
}

.comment-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.comment-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.comment-content {
  flex: 1;
}

.comment-user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-user {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.comment-text {
  font-size: 28rpx;
  color: #333;
  margin: 10rpx 0;
}

.comment-time {
  font-size: 24rpx;
  color: #999;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.input-box {
  flex: 1;
  margin-right: 20rpx;
}

.input-box input {
  background-color: #f5f7fa;
  height: 72rpx;
  border-radius: 36rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

.action-buttons {
  display: flex;
  align-items: center;
}

.action-btn {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
}

.action-btn text {
  font-size: 28rpx;
  color: #666;
  margin-left: 10rpx;
}

.send-btn {
  margin-left: 10rpx;
  background-color: #4CAF50;
  color: #fff;
  border-radius: 30rpx;
  padding: 0 30rpx;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 28rpx;
  border: none;
}
.send-btn[disabled] {
  background-color: #cccccc;
  color: #fff;
}

.delete-comment-icon {
  margin-left: 16rpx;
  vertical-align: middle;
  cursor: pointer;
}
</style>